<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
<style>
	body{
		text-align: center;
	}
	nav{
		display: inline-block;
		margin: 60px auto 45px;
		/* background-color:burlywood; 改变边框颜色*/
		background-color:purple;
	}
	nav a{
		display: inline-block;
		padding: 18px 30px;
		/* color: 改变字体颜色; */
		color:white;
		font-weight: bold;
		font-size: 16px;
		text-decoration:none;
		line-height: 1;
		text-transform: uppercase;
		background-color: transparent;
	}
	.choose{
		/* //改变 点击后的颜色 */
		background-color:blue;
	}
</style>
<title></title>
</head>
<body>
	<div id="main">
		
		<nav>
			<a href="#" @click="chooseMenu('Home')">Home</a>
			<a href="#"@click="chooseMenu('Projects')">Projects</a>
			<a href="#"@click="chooseMenu('Services')">Services</a>
			<a href="#"@click="chooseMenu('Contact')">Contact</a>
		</nav>
		
		
		<p>您选择了<component :is='chooseName'> Home </b> 菜单</p>
		
	</div>
	<script>
		// // var menus=document.getElementsByTagName('a');
		// // // var menuName=document.getElementById('menuName');//选择哪个就是哪个菜单
		// var menus=document.getElementById('a');
		// //对整体赋予的点击事件 判断触发事件的元素
		// // main.addEventListener('click',change);
		
		// // function change(e){
		// // 	//console.log(e){
		// // 		var el=e.target;
		// // 		//console.log(e.tagName);
		// // 		if(el.tagName=='A'){ //tagName 返回节点
		// // 			initMenu();
		// // 			el.classList.add('choose');
		// // 			menuName.innerHTML=el.innerHTML+"";
		// // 		}
		// // 	}
			
		// 	for(let menu of menus){
		// 		menu.onclick=function(){
		// 			initMenu();
		// 			this.classList.add('choose');
		// 		}
		// 	}
		// function initMenu(){
		// 	for(let menu of menus){
		// 		menu.classList.remove('choose');
				
		// 	}
			
		// }

		Vue.component("Home",{template:'<h2>Home菜单</h2>'})
		Vue.component("Projects",{template:'<h2>Projects菜单</h2>'})
		Vue.component("Services",{template:'<h2>Services菜单</h2>'})
		Vue.component("Contact",{template:'<h2>Contact菜单</h2>'})
		
		
		
		new Vue({
			el:"#main",
			data:{
				chooseName:"Home"
			},
			methods:{
				chooseMenu:function(name){
					this.chooseName=name;
				}
			}
		})
		

	</script>
</body>
</html>
